/**
 * useReducer()
 *
 *    作用：与 useState 一样，也是创建 状态数据，类似与 redux 的玩法
 *    语法：
 *      const [state, dispatch] = useReducer(reducer, initialState)
 *      1. reducer - 纯函数
 *        1. 与 redux 的 reducer 不同之处在于不同默认触发一次
 *      2. state - 状态数据
 *      3. dispatch - 派发器，用于更新状态数据
 *      4. initialState - 初始化数据
 */

import { Button, Space } from "antd";
import { useReducer } from "react";

export default function App() {
  const [state, dispatch] = useReducer((state: number, action) => {
    console.log("reducer");
    switch (action.type) {
      case "INCREMENT":
        return state + 1;
      case "DECREMENT":
        return state - 1;
      default:
        return state;
    }
  }, 1);

  return (
    <div>
      <h1>useReducer</h1>
      <p>{state}</p>
      <Space>
        <Button onClick={() => dispatch({ type: "INCREMENT" })}>
          INCREMENT
        </Button>
        <Button onClick={() => dispatch({ type: "DECREMENT" })}>
          DECREMENT
        </Button>
      </Space>
    </div>
  );
}
